<template>
  <view class="tp-plan-req-card" :id="'p-' + planId">
    <view class="title-wrap">
      <view class="title">{{target}}</view>
      <view class="tip" @click="onMoreClick"><ai-icon type="icon-more" :size="20" color="var(--gray-2)"></ai-icon></view>
    </view>
    <view class="content">{{text}}</view>
    <view class="tags" v-if="tags && tags.length > 0">
      <ai-tag v-for="(tag, idx) in tags" color="primary" :text="tag" :key="planId + 'tg-' + idx "></ai-tag>
    </view>
    <view class="pro-wrap" v-if="showProgress">
      <progress :percent="percent" activeColor="#ff9000" stroke-width="12" border-radius="6" :show-info="true" :font-size="14" />
    </view>
    
    <uni-popup ref="morePopup">
      <view class="more-popup-content">
        <view class="content-title">详细信息</view>
        <view class="content-row">
          <text class="row-label">目的地：</text>
          <view class="row-value-box">
            <text class="row-value-item">{{target}}</text>
          </view>
        </view>
        <view class="content-row">
          <text class="row-label">时间段：</text>
          <view class="row-value-box">
            <text class="row-value-item">{{startDate}}至{{endDate}}</text>
          </view>
        </view>
        <view class="content-row" v-if="budget || budgetRange">
          <text class="row-label">预算：</text>
          <view class="row-value-box">
            <text class="row-value-item tag" v-if="budget">{{budget}}</text>
            <text class="row-value-item" v-if="budgetRange">{{budgetRange}}</text>
          </view>
        </view>
        <view class="content-row" v-if="tags && tags.length > 0">
          <text class="row-label">行程特点：</text>
          <view class="row-value-box">
            <view class="row-value-item tag" v-for="(tag,idx) in tags" :key="'tag-'+idx">{{tag}}</view>
          </view>
        </view>
        
        <view class="content-row" v-if="foodTags && foodTags.length > 0">
          <text class="row-label">餐饮要求：</text>
          <view class="row-value-box">
            <view class="row-value-item tag" v-for="(tag,idx) in foodTags" :key="'res-tag-'+idx">{{tag}}</view>
          </view>
        </view>
        
        <view class="content-row" v-if="hotel">
          <text class="row-label">酒店要求：</text>
          <view class="row-value-box">
            <text class="row-value-item">{{hotel}}</text>
          </view>
        </view>
        <view class="content-row" v-if="custom">
          <text class="row-label">其他要求：</text>
          <view class="row-value-box">
            <text class="row-value-item">{{custom}}</text>
          </view>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
  const HOTEL = {
    '1': '每天不同',
    '2': '每天相同',
    '3': '无需酒店',
    '4': '自己指定'
  }
  
  export default {
    name:"tp-plan-req-card",
    props: {
      planId: [Number, String],
      target: String,
      takeDays: [Number, String],
      startDate: String,
      endDate: String,
      budget: String,
      budgetRange: String,
      custom: String,
      tags: {
        type: Array,
        default: []
      },
      features: {
        type: Object,
        default: {}
      },
      showProgress: {
        type: Boolean,
        default: false
      },
      percent: {
        type: Number,
        default: 0
      },
      hideProp: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        
      };
    },
    computed: {
      text() {
        let text = `${this.takeDays}天行程`
        if (this.budget) {
          text = text + "，" + this.budget
        }
        if (this.budgetRange) {
          text = text + "；预算：" + this.budgetRange
        }
        if (this.startDate && this.endDate) {
          text = text + "；具体时间：" + this.startDate + "至" + this.endDate
        }
        return text
      },
      hotel() {
        if (!this.features || !this.features.hotelFeature) {
          return "";
        }
        let type = this.features.hotelFeature
        if (type == '4') {
          let hotelName = this.features.hotelName
          return hotelName
        } else {
          return HOTEL[type]
        }
      },
      foodTags() {
        if (!this.features || !this.features.foodTags) {
          return []
        }
        return this.features.foodTags || []
      }
    },
    methods: {
      onMoreClick() {
        if (this.hideProp) {
          return
        }
        this.$refs.morePopup.open('center')
      }
    }
  }
</script>

<style lang="scss" scoped>
  @import "@/styles/_var.scss";
  .tp-plan-req-card {
    margin-top: 20px;
    box-shadow: var(--shadow-2);
    background: $card-bg;
    padding: $card-padding * 2;
    border-radius: $card-border-radius;
    box-shadow: var(--shadow-2);
    
    .title-wrap {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      padding-bottom: $card-padding;
      
      .title {
        font-size: $font-size-lg;
        font-weight: $card-title-font-weight;
      }
      .tip {
        cursor: pointer;
      }
    }
    
    .content {
      color: var(--gray-2);
    }
    .tags {
      margin-top: 4px;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
    }
    .pro-wrap {
      margin-top: $gutter;
    }
  }
  
  .more-popup-content {
    display: flex;
    flex-direction: column;
    background: $card-bg;
    padding: $card-padding;
    margin: 0 $gutter * 2;
    border-radius: $card-border-radius;
    box-shadow: var(--shadow-2);
    line-height: 1.5;
    min-width: 320px;
  }
  
  .content-title {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0 $gutter 4px $gutter;
    border-bottom: 1px solid var(--gray-5);
    margin-bottom: $gutter;
  }
  
  .content-row {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    margin-bottom: $gutter * 0.5;
    
    .row-label {
      color: var(--gray-3);
      font-size: $font-size-md;
      font-weight: $font-weight-bold;
      min-width: 25%;
    }
    .row-value-box {
      display: flex;
      flex-direction: row;
      align-items: center;
      flex-wrap: wrap;
      flex-grow: 1;
      width: 75%;
      
      .row-value-item {
        color: var(--gray-1);
        font-size: $font-size-md;
        padding: 0 $gutter * 0.5;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        word-break: break-all;
        
        &.tag {
          color: var(--brand-1);
          font-size: $font-size-sm;;
          background-color: var(--brand-3);
          border-radius: 4px;
          margin: 2px;
        }
      }
    }
  }
  

</style>